<template>
  <report-search></report-search>
  <ele-pro-table
    ref="tableRef"
    row-key="id"
    :columns="columns"
    :datasource="datasource"
    :show-overflow-tooltip="true"
    v-model:selections="selections"
    :highlight-current-row="true"
    :export-config="{ fileName: '报表' }"
    :where="defaultWhere"
    :load-on-created="false"
    cache-key="jimuReportTable"
  >
    <template #toolbar>
      <el-button
        v-permission="'jimu:report:add'"
        type="primary"
        class="ele-btn-icon"
        :icon="PlusOutlined"
        @click="openEdit()"
      >
        新建
      </el-button>
      <el-button
        type="danger"
        class="ele-btn-icon"
        :icon="DeleteOutlined"
        @click="removeBatch()"
      >
        删除
      </el-button>
      <el-button
        class="ele-btn-icon"
        :icon="DownloadOutlined"
        @click="exportData"
      >
        导出
      </el-button>
    </template>
    <template #action="{ row }">
      <el-link type="success" underline="never" @click="openShow(row)">
        查看
      </el-link>
      <el-divider direction="vertical" />
      <el-link type="primary" underline="never" @click="openEdit(row)">
        修改
      </el-link>
      <el-divider direction="vertical" />
      <el-link type="danger" underline="never" @click="removeBatch(row)">
        删除
      </el-link>
    </template>
    <template #status="{ row }">
      <el-switch
        :model-value="row.status == 0"
        @change="(checked) => editStatus(checked, row)"
      />
    </template>
  </ele-pro-table>
  <!-- 编辑弹窗 -->
  <report-edit v-model="showEdit" :data="current" @done="reload" />
</template>
<script setup>
  import { ref, reactive, watch } from 'vue';
  import {
    PlusOutlined,
    DeleteOutlined,
    DownloadOutlined
  } from '@/components/icons';
  import { ElMessageBox } from 'element-plus';
  import { EleMessage } from 'ele-admin-plus';
  import ReportSearch from './report-search.vue';
  import ReportEdit from './report-edit.vue';
  import {
    pageReports,
    removeReports,
    exportReports,
    updateReportStatus
  } from '@/api/manage/jimu/report';

  const props = defineProps({
    typeId: Number
  });

  /** 表格实例 */
  const tableRef = ref(null);
  /** 表格列配置 */
  const columns = ref([
    {
      type: 'index',
      columnKey: 'index',
      width: 50,
      align: 'center',
      fixed: 'left'
    },
    {
      prop: 'title',
      label: '标题',
      align: 'left',
      minWidth: 110
    },
    {
      prop: 'version',
      label: '版本',
      align: 'center',
      minWidth: 90
    },
    {
      prop: 'orderNum',
      label: '排序',
      align: 'center',
      minWidth: 70
    },
    {
      prop: 'status',
      label: '状态',
      align: 'center',
      slot: 'status',
      minWidth: 90
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 180,
      align: 'center',
      slot: 'action',
      hideInPrint: true,
      hideInExport: true
    }
  ]);

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 表格数据源 */
  const datasource = ({ pages, where }) => {
    return pageReports({ ...where, ...pages });
  };

  /** 搜索 */
  const reload = (where) => {
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 默认搜索条件 */
  const defaultWhere = reactive({
    typeId: props.typeId
  });

  /** 打开编辑弹窗 */
  const openEdit = (row) => {
    // if (!props.typeId) {
    //   EleMessage.warning({message: '请先在左侧选择报表的分类', plain: true});
    //   return;
    // }
    current.value = row ?? null;
    showEdit.value = true;
  };

  /** 批量删除 */
  const removeBatch = (row) => {
    const rows = row == null ? selections.value : [row];
    if (!rows.length) {
      EleMessage.error({ message: '请至少选择一条数据', plain: true });
      return;
    }
    ElMessageBox.confirm(
      `是否确认删除标题为"${rows.map((d) => d.title).join()}"的数据项?`,
      '系统提示',
      { type: 'warning', draggable: true }
    )
      .then(() => {
        const loading = EleMessage.loading({
          message: '请求中..',
          plain: true
        });
        removeReports(rows.map((d) => d.id))
          .then(() => {
            loading.close();
            EleMessage.success({ message: '删除成功', plain: true });
            reload();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error({ message: e.message, plain: true });
          });
      })
      .catch(() => {});
  };

  /** 导出数据 */
  const exportData = () => {
    const loading = EleMessage.loading({
      message: '请求中..',
      plain: true
    });
    tableRef.value?.fetch?.(({ where }) => {
      exportReports(where)
        .then(() => {
          loading.close();
        })
        .catch((e) => {
          loading.close();
          EleMessage.error({ message: e.message, plain: true });
        });
    });
  };

  /** 修改链接状态 */
  const editStatus = (checked, row) => {
    const status = checked ? '0' : '1';
    updateReportStatus(row.id, status)
      .then((msg) => {
        row.status = status;
        EleMessage.success(msg);
      })
      .catch((e) => {
        EleMessage.error(e.message);
      });
  };

  /**
   * 显示报表
   * @param row
   */
  const openShow = (row) => {
    window.open(row.url);
  };

  watch(
    () => props.typeId,
    (typeId) => {
      if (typeId) {
        defaultWhere.typeId = props.typeId;
        tableRef.value?.reload?.(); //刷新当前表格
      }
    }
  );
</script>
